<template>
  <div class=biaodan>
      账号:<input type="text" v-model="Biaodan1.xinming"><br><br>
      密码:<input type="text" v-model="Biaodan1.mima"><br><br>
      性别: 男<input type="radio" name ="xinbie" v-model="Biaodan1.gender"  value ="male">
            女<input type="radio" name ="xinbie" v-model="Biaodan1.gender" value ="female"><br><br>
      爱好:
            抽烟 <input type="checkbox" v-model="Biaodan1.hobby" value="smoke">
            喝酒 <input type="checkbox" v-model="Biaodan1.hobby" value="drink">
            烫头 <input type="checkbox" v-model="Biaodan1.hobby" value="perm"><br><br>
      所属校区:
        <select v-model="Biaodan1.city">
          <option value="">请选择校区</option>  
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
         </select> <br> <br>
         其他信息: <textarea v-model="Biaodan1.liebiaokuang"></textarea><br><br>
            <input type="checkbox" v-model="Biaodan1.xuanzhe">阅读并接受<a href="https://www.xuanzhe.com">《用户协议》</a><br><br>
            <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
    name:'Biaoban',
    data(){
        return {
            Biaodan1:{
                xinming:'',
                mima:'',
                gender:'male',
                hobby:[],
                city:'wuhan',
                xuanzhe:false
            }
        }
    },
    methods: {
        submit(){
            console.log(this.Biaodan1)
        }
    }
}
</script>

<style scoped>
.biaodan {
    border: 1px solid rgb(25, 108, 218);
    padding: 20px;
    background-color: coral;
}
</style>